<template>
	<view> 
		<!-- 404页面 --> 
		<view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view> 
		<view v-if="netWorkType != 'none'">  
      		<view class="attention"> 
				<view class="content"> 
					<view class="title">注意事项</view>
					<view class="notice">1) 您修改发票信息后，我们将在1个工作日内完成审核，发票信息审核期间不影响下单。</view>
					<view class="notice">2) 如您提供的信息有误，将影响及时发货,请务必认真校对开票信息。</view> 
				</view> 
			</view> 
      		<view class="invoice-content"> 
				<view class="title">
					发票类型
				</view>
				<view> 
					<button    
						type="default"
						:class="type===1?'type-button checked':'type-button'" 
						@click="changeType(1)"
					>
					普通发票
					</button>  
					<button    
						:class="type===2?'type-button checked':'type-button'" 
						@click="changeType(2)"
					>专用发票 
					</button> 
					<button  
						:class="type===0?'type-button checked':'type-button'" 
						class="type-button"
						@click="changeType(0)"
					>无要求
					</button>
							 
				</view>
				<view class="check-ele" v-if="type === 1">
					<checkbox-group @change="changeCheck1">
						<label>
					<checkbox 
						class="check-box" 
						:checked="invoice_type1.ele_accept == 1?true:false"   
					/>可接受电子发票 
						</label>
					</checkbox-group> 
				</view>
				<view class="check-ele" v-if="type === 2">
					<checkbox-group @change="changeCheck2">
						<label>
					<checkbox 
						class="check-box" 
						:checked="invoice_type2.ele_accept == 1?true:false"   
					/>可接受电子发票 
						</label>
					</checkbox-group> 
				</view>
				<view class="ele-info"  v-if="type === 1">
					电子发票，功效等同于普通纸质发票。增值税电子普通发票的开票方和受票方需要纸质发票的，可以自行打印增值税电子普通发票的版式文件，其法律效力、基本用途、基本使用规定等与税务机关监制的增值税普通发票相同。

				</view> 
				<view class="ele-info"  v-if="type === 2">
					电子发票与普通纸质发票具有相同法律效力。电子发票更便利，更易保存。若您需要纸质发票，可选择自行打印。 
				</view> 
				<view class="input-list" v-if="type === 1">
					<!-- <view class="list">
						<view class="title"><span class="text-danger">*</span>类型<text class="text">(营业执照上的[公司名称])</text></view>
						<view class="content display-box"> 
							<checkbox-group @change="changeInvoiceType(0)">
								<label>
								<checkbox 
									class="check-box" 
									:checked="invoice_type1.invoice_type == 0?true:false"   
								/>公司 
									</label>
							</checkbox-group> 
							<checkbox-group @change="changeInvoiceType(1)">
								<label>
									<checkbox 
										class="check-box" 
										:checked="invoice_type1.invoice_type == 1?true:false"   
									/>个人
									</label>
							</checkbox-group> 
						</view>
					</view> -->
					<view v-if="invoice_type1.invoice_type">
						<view class="list">
							<view class="title"><span class="text-danger">*</span>抬头名称<text class="text"></text></view>
							<view class="content"> 
								<input class="input" v-model="invoice_type1.name" type="text" placeholder="请填写抬头名称">
							</view>
						</view>
					</view>
					<view v-else>
						<view class="list">
							<view class="title"><span class="text-danger">*</span>公司名称<text class="text">(营业执照上的[公司名称])</text></view>
							<view class="content"> 
								<input class="input" v-model="invoice_type1.name" type="text" placeholder="请填写公司名称">
							</view>
						</view>
						<view class="list">
							<view class="title"><span class="text-danger">*</span>纳税人识别号<text class="text">(营业执照上的[统一社会信用代码)</text></view>
						
							<view class="content"> 
								<input class="input" v-model="invoice_type1.credit_code" type="text" placeholder="请填写纳税人识别号">
							</view>
						</view>
						<view class="list">
							<view class="title"><span class="text-danger">*</span>地址<text class="text">(营业执照上的[公司地址])</text></view>
							<view class="content">
								<input class="input" v-model="invoice_type1.address" type="text" placeholder="请填写地址">
							</view>
						</view> 
						<view class="list">
							<view class="title"><span class="text-danger">*</span>电话<text class="text"></text></view>
							<view class="content">
								<input class="input" v-model="invoice_type1.phone" type="text" placeholder="请填写电话">
							</view>
						</view> 
					</view>
					
				 </view>
				<view class="input-list" v-if="type === 2">
					<!-- <view class="list">
						<view class="title">上传开票信息</view>
						<view class="content">    
							<view class="tui-upload-box">
								<view v-if="imageList.length" class="tui-image-item" v-for="(item,index) in imageList" :key="index">
									<image :src="item" class="tui-item-img" @tap.stop="previewImage(index)" mode="aspectFill"></image> 
									<view v-if="!forbidDel" class="tui-img-del" @tap.stop="delImage(index)"></view>
									<view v-if="statusArr[index]!=1" class="tui-upload-mask">
										<view class="tui-upload-loading" v-if="statusArr[index]==2"></view>
										<text class="tui-tips">{{statusArr[index]==2?'上传中...':'上传失败'}}</text>
										<view class="tui-mask-btn" v-if="statusArr[index]==3" @tap.stop="reUpLoad(index)" hover-class="tui-hover"
										:hover-stay-time="150">重新上传</view>			
									</view>
								</view>
								<view v-if="isShowAdd" class="tui-upload-add" @tap="chooseImage">
									<view class="inner">
										<view class="iconfont camera-icon">&#xe69f;</view>
										<view class="up-txt" v-if="txt=='evidance'">
											选择图片
										</view>
										<view v-else class="up-txt">上传图片</view>
										<view v-if="txt=='normall'" class="up-tip">（最多4张）</view>
									</view>
									
								</view>
							</view>
						</view>
					</view> -->
					<view class="list">
						<view class="title"><span class="text-danger">*</span>单位名称<text class="text">(专票要求的单位名称)</text></view>
						<view class="content"> 
							<input class="input" v-model="invoice_type2.name" type="text" placeholder="请填写单位名称">
						</view>
					</view>
					<view class="list">
						<view class="title"><span class="text-danger">*</span>纳税人识别号<text class="text">(营业执照上的[统一社会信用代码)</text></view>

						<view class="content"> 
							<input class="input" v-model="invoice_type2.credit_code" type="text" placeholder="请填写纳税人识别号">
						</view>
					</view>
					<view class="list">
						<view class="title"><span class="text-danger">*</span>地址<text class="text">(专票要求的公司地址)</text></view>
						<view class="content">
							<input class="input" v-model="invoice_type2.address" type="text" placeholder="请填写地址">
						</view>
					</view> 
					<view class="list">
						<view class="title"><span class="text-danger">*</span>电话<text class="text">(专票要求的公司电话)</text></view>
						<view class="content">
							<input class="input" v-model="invoice_type2.phone" type="text" placeholder="请填写电话">
						</view>
					</view> 
					<view class="list">
						<view class="title"><span class="text-danger">*</span>开户银行<text class="text">(专票要求的公司对公账户开户行)</text></view>
						<view class="content">
							<input class="input" v-model="invoice_type2.bank" type="text" placeholder="请填写开户银行">
						</view>
					</view> 
					<view class="list">
						<view class="title"><span class="text-danger">*</span>银行卡号<text class="text">(专票要求的公司对公账户银行卡号)</text></view>
						<view class="content">
							<input class="input" v-model="invoice_type2.bank_card" type="text" placeholder="请填写银行卡号">
						</view>
					</view> 
				 </view>
			</view>  
			<view class="submit-button"> 
				<button   
						type="default"
					    class="submit"
						@click="BtnInvoice"
					>
					确定
					</button>
			</view>
		</view> 
    </view>  
</template> 
<script>
	// 引入倒计时组件
	import {oss_host} from '@/config/config.js';	
	import uniCountdown from '@/components/tui-countdown/tui-countdown.vue'
	
	import { pathToBase64, base64ToPath } from '@/js_sdk/QuShe-SharerPoster/util/QS-SharePoster/image-tools.js';
	
	import Vue from 'vue'
	import { mapGetters } from 'vuex';
	export default{
		
		name: 'tuiUpload',
		props: {
			txt:{
				type: String,
				default: "evidance"
				
			},
			//初始化图片路径
			value: {
				type: Array,
				default () {
					return []
				}
			},
			//禁用删除
			forbidDel: {
				type: Boolean,
				default: false
			},
			//禁用添加
			forbidAdd: {
				type: Boolean,
				default: false
			},
			//服务器地址
			serverUrl: {
				type: String,
				default: "https://cgapi.opportshop.com/upload/index"
			},
			//限制数
			limit: {
				type: Number,
				default:3
			},
			//项目名，默认为 file
			fileKeyName: {
				type: String,
				default: "file"
			},
			dirType:{
				type: Number,//1 发票图片  2 问题反馈
				default:1
			},
			userType:{  //0 总管理  1 商家   2 用户
				type: Number,
				default:2
			}
		},
		data() {
			return{
				type:1,
				invoice_type:0,// 类型 0公司单位  1个人
				invoice_type1:{ 
					type:1,
					ele_accept:0,
					name:'',
					credit_code:'',
					address:'', 
					invoice_type:0,
					phone:'',
				},
				invoice_type2:{ 
					type:2,
					ele_accept:0,
					name:'',
					credit_code:'',
					address:'',
					invoice_img:[],
					phone:'',
					invoice_type:0
				},
				
				//上传后资源图片地址
				imageList:[],
				imageNameList:[],
				//上传状态：1-上传成功 2-上传中 3-上传失败
				statusArr: []
			}
		},
		
		components:{
			uniCountdown
		},
		computed: {
				//注册网络状态
				...mapGetters(['netWorkType']),	
				isShowAdd() {
					let isShow = true;
					if (this.forbidAdd || (this.limit && this.imageList.length >= this.limit)) {
						isShow = false;
					}
					return isShow
				}
			},
		onLoad: function(e)  {  
			const _this = this
				 console.log(_this)				
				var opt = {
					url: '/user/getInvoiceInfo', 
					success: function(res) {
						//console.log(res)
						if (res.status == 1) { 
							let data =res.data 
							data.forEach((item)=>{    //js遍历数组 
								if(item.type == 1){ 
									_this.invoice_type1.type = item.type
									_this.invoice_type1.ele_accept = item.ele_accept
									_this.invoice_type1.name = item.name
									_this.invoice_type1.credit_code = item.credit_code
									_this.invoice_type1.address = item.address
									_this.invoice_type1.invoice_type = item.invoice_type
									_this.invoice_type1.phone=item.phone 
								}else if(item.type == 2){ 
									_this.invoice_type2.type=item.type,
									_this.invoice_type2.ele_accept=item.ele_accept,
									_this.invoice_type2.name=item.name,
									_this.invoice_type2.credit_code=item.credit_code,
									_this.invoice_type2.address=item.address, 
									_this.invoice_type2.phone=item.phone 
									_this.invoice_type2.bank=item.bank 
									_this.invoice_type2.bank_card=item.bank_card 
									if(item.invoice_img.length > 0){
										for (let i = 0; i < item.invoice_img.length; i++) { 
											_this.invoice_type2.invoice_img.push(item.invoice_img[i])
											_this.imageList.push(oss_host+item.invoice_img[i])
											_this.$set(_this.statusArr, i, 1)
										}
									} 
								}   
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}

					}
				};
				_this.$service.GetApi(opt)
		},
		methods:{
			/**
			 * 返回
			 */
			onBack() {
			  uni.navigateBack();
			}, 
			changeType(e){
				this.type=e
			}, 
			changeCheck1(){
				if(this.invoice_type1.ele_accept === 1){
					this.invoice_type1.ele_accept=0 
				}else{
					this.invoice_type1.ele_accept=1 
				} 
			},
			changeCheck2(){
				if(this.invoice_type2.ele_accept === 1){
					this.invoice_type2.ele_accept=0 
				}else{
					this.invoice_type2.ele_accept=1 
				} 
			},
			// 重新上传
			reUpLoad(index) {
				this.$set(this.statusArr, index, "2")
				this.change()
				this.uploadImage(index, this.imageList[index]).then(() => {
					this.change()
				}).catch(() => {
					this.change()
				})
			},
			change() {
				let status = ~this.statusArr.indexOf("2") ? 2 : 1
				if (status != 2 && ~this.statusArr.indexOf("3")) {
					// 上传失败
					status = 3
				}
				this.$emit('complete', {
					status: status,
					imgArr: this.imageList,
					imgNameArr:this.imageNameList
				})
			},
			changeInvoiceType(type){
				let _this = this
				_this.invoice_type1.invoice_type = type
			},
			
			chooseImage: function() {
				let _this = this;
				uni.chooseImage({
					count: _this.limit - _this.imageList.length,
					success: function(e) {
						let imageArr = [];
						for (let i = 0; i < e.tempFilePaths.length; i++) {
							let len = _this.imageList.length;
							if (len >= _this.limit) {
								uni.showToast({
									title: `最多可上传${_this.limit}张图片`,
									icon: "none"
								});
								break;
							}
							let path = e.tempFilePaths[i]
						
							imageArr.push(path)
							_this.imageList.push(path)
							_this.imageNameList.push(path)
							_this.statusArr.push("2")
						}
						_this.change()

						let start = _this.imageList.length - imageArr.length
						for (let j = 0; j < imageArr.length; j++) {
							let index = start + j
							//服务器地址
							if (_this.serverUrl) {
								_this.uploadImage(index, imageArr[j]).then(() => {
									_this.change()
								}).catch(() => {
									_this.change()
								})
							} else {
								//无服务器地址则直接返回成功
								_this.$set(_this.statusArr, index, "1")
								_this.change()
							}
						}
					}
				})
			},
			
			uploadImage: function(index, url) {
			//	{type: 'base64', imgbase64: evt.target.result, userType: 2}
				let _this = this;
				return new Promise((resolve, reject) => {
					console.log(this.serverUrl)
					 pathToBase64(url)
					   .then(base64 => {
						//   _this.imgBase64 = base64
							var token=uni.getStorageSync('token') || ''; 
							uni.request({
							    url: this.serverUrl, //仅为示例，并非真实接口地址。
							    data: {
							       dirType:this.dirType,
									saveType:0,
									userType:this.userType,
									sourceType:0,
									type:'base64',
									imgbase64:base64
							    },
							    header: {
							        "Content-Type": "application/json",
							        "Authorization":token
							    },
								dataType: 'json',
								method:'POST',
							    success: (res) => {
							       // console.log(res);
							        // 			console.log(999)
									if (res.statusCode == 200&&res.data.status==1) {
									//返回结果 此处需要按接口实际返回进行修改
									
									//判断code，以实际接口规范判断
								
									//if (d.code % 100 === 0) {
										// 上传成功 d.url 为上传后图片地址，以实际接口返回为准
										_this.imageList[index] = res.data.file.url_oss
										_this.invoice_type2.invoice_img[index] = res.data.file.path
										_this.imageNameList[index] = res.data.file.name
									
										_this.$set(_this.statusArr, index, res.data.file.url ? "1" : "3")
								//	} else {
										// 上传失败
								//		_this.$set(_this.statusArr, index, "3")
								//	}
									resolve(index)
									} else {
										_this.$set(_this.statusArr, index, "3")
										reject(index)
									}
									
									
							    }
							});
					   })
					   .catch(error => {
					    //console.error(error)
						 
					   }) 
				
				})

			},
			delImage: function(index) {
				this.imageList.splice(index, 1)
				this.statusArr.splice(index, 1)
				this.$emit("remove", {
					index: index
				})
				this.change()
			},
			previewImage: function(index) {
				if (!this.imageList.length) return;
				uni.previewImage({
					current: this.imageList[index],
					loop: true,
					urls: this.imageList
				})
			},
			BtnInvoice(){
				const _this = this
				 console.log(_this)				
				var opt = {
					url: '/user/setInvoiceInfo',
					data: { 
						type:this.type,
						invoice_type1:_this.invoice_type1,
						invoice_type2:_this.invoice_type2,
					},
					success: function(res) {
						//console.log(res)
						if (res.status == 1) {
							_this.data = res.data
							uni.showToast({
								icon: 'none',
								title: res.message
							}); 
							setTimeout(function() {
								uni.navigateTo({
									url: "/pages/Setting/Setting"
								})
							}, 1000);
																
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}

					}
				};
				_this.$service.GetApi(opt)
			}
		}
		
	}
</script>
<!-- 引入页面scss -->
<style lang="scss">
	@import "./index.scss";
</style>

